<template>
  <div class="home-selection-find">
    <div class="home-selection-find-shop" v-for="(item, i) in find" :key="i">
      <img :src="item.pic" alt="" class="home-selection-find-shop-pic" />
      <div class="home-selection-find-shop-title">
        <span class="home-selection-find-shop-title-tag">天猫</span>
        {{ item.dtitle }}
      </div>
      <div class="home-selection-find-shop-price">
        券后 <span class="home-rmb">¥</span
        ><span class="home-selection-find-shop-new-price">{{
          item.jiage
        }}</span>
        <span class="home-selection-find-shop-lowest" v-if="item.lowest"
          >历史最低价</span
        >
      </div>
      <div class="home-selection-find-shop-quan-box">
        <div class="home-selection-find-shop-qjd" v-if="item.labelTwo">
          旗舰店
        </div>
        <div class="home-selection-find-shop-bk" v-if="item.labelOne">爆款</div>
        <div class="home-selection-find-shop-quan">
          <span class="home-selection-find-shop-quan-tag">券</span
          >{{ item.quanJine }}元
        </div>
      </div>
      <div class="home-selection-find-shop-sale">
        已售{{ (item.xiaoliang / 10000).toFixed(1) }}万
      </div>
    </div>
  </div>
</template>
<script lang="ts">
import { defineComponent, reactive, toRefs, computed, onMounted } from "vue";
import { useStore } from "vuex";
export default defineComponent({
  setup() {
    const store = useStore();
    const start = reactive({
      page: 1,
    });
    const find = computed(() => {
      return store.state.home.find;
    });
    const getshop = () => {
      store.dispatch({
        type: "home/getfind",
        page: start.page,
      });
      start.page++;
    };
    onMounted(() => {
      getshop();
    });
    return {
      ...toRefs(start),
      find,
    };
  },
});
</script>
<style lang="stylus">
.home-selection-find
  width 100%
  padding-top .3rem
  overflow hidden
  .home-selection-find-shop
    float left
    width 1.675rem
    box-sizing border-box
    margin .1rem
    background #fff
    height 3rem
    overflow hidden
    display flex
    flex-direction column
    justify-content center
    border-radius 6px
    overflow hidden
    .home-selection-find-shop-pic
      width 100%
      border-radius 6px 0
    .home-selection-find-shop-title
      font-size .14rem
      line-height .2rem
      padding .1rem
      height .32rem
      overflow hidden
      text-overflow ellipsis
      display -webkit-box
      -webkit-line-clamp 2
      -webkit-box-orient vertical
      .home-selection-find-shop-title-tag
        background red
        color #fff
        padding 0 .03rem
        margin-right .03rem
        font-size .1rem
    .home-selection-find-shop-price
      font-size .12rem
      margin .05rem .1rem 0
      .home-rmb
        color red
      .home-selection-find-shop-new-price
        font-size .18rem
        color red
      .home-selection-find-shop-lowest
        background red
        color #fff
        margin-left .04rem
        padding 0 .02rem
    .home-selection-find-shop-quan-box
      align-self flex-start
      font-size .12rem
      display flex
      margin .03rem .1rem
      justify-content flex-start
      .home-selection-find-shop-qjd
        color red
        border .01rem red solid
        margin-right .05rem
        padding 0 .03rem
      .home-selection-find-shop-bk
        color #F57223
        border #F57223 .01rem solid
        margin-right .05rem
        padding 0 .03rem
      .home-selection-find-shop-quan
        background linear-gradient(90deg,#ff8873 0,#ff4f4f 100%)
        color #fff
        padding-right .05rem
        .home-selection-find-shop-quan-tag
          background #fff
          color red
          margin-right .05rem
    .home-selection-find-shop-sale
      color #666
      font-size .12rem
      line-height .16rem
      margin 0 .1rem
      margin-bottom .1rem
</style>
